<template>
  <div class="viewData">
    <div class="title">趋势分析（目标完成率）</div>
    <div class="time-big">
      <div class="tablist">
        <div class="tab-item" @click="getActive(0)">近7天</div>
        <div class="tab-item" @click="getActive(1)">近14天</div>
        <div class="tab-item" @click="getActive(2)">近30天</div>
      </div>
      <el-date-picker
        v-model="dateRange1"
        value-format="yyyy-MM-dd"
        type="daterange"
        range-separator="-"
        size="small"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        @change="handleQuery"
      ></el-date-picker>
    </div>
     <div id="lineMain" style="width: 100%; height:400px"></div>
    <div class="title">详细数据</div>
    <el-table
      :data="tableDataList"
      :max-height="tableHeight"
      ref="companylabelList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        :label="item.label"
        :align="item.align?item.align:`center`"
        v-for="(item, index) in tableColumns"
        :key="index"
        :prop="item.key"
        :min-width="item.minWidth ? item.minWidth : ``"
        :fixed="item.fixed ? item.fixed : false"
        :show-overflow-tooltip="true"
      >
        <!--用于表格自定义-->
        <template slot-scope="scope">
          <div v-if="item.key=='name'">
            <div class="userInfo">
              <img src="../../../assets/images/profile.jpg"/>
              <div class="name">小城红</div>
              <div class="label">@志新</div>
            </div>
          </div>
          <div class="label-list" v-else-if="item.key=='label'">
            <span>未入VIP群</span>
            <span>持续7天未发言</span>
            <span>1000</span>
          </div>

          <div v-else style="text-align: center">{{ scope.row[item.key] }}</div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {listUser} from "@/api/system/user";
export default {
  name: "viewData",
  data() {
    return {
      active: 0,
      dateRange1: [],
      tableHeight: 530,
      tableColumns: [
        {key: 'name', label: `日期`, visible: true, minWidth: 150, fixed: true, align: 'left'},
        {key: 'label', label: `目标完成率`, visible: true, minWidth: 150, fixed: false},
        {key: 'label', label: `受众用户（人数）`, visible: true, minWidth: 150, fixed: false},
        {key: 'label', label: `计划触发`, visible: true, minWidth: 150, fixed: false},
        {key: 'label', label: `目标完成`, visible: true, minWidth: 150, fixed: false},
      ],
      tableDataList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        id: null,//用户id
        userName1: null,

      },
      total: 8, // 表格的总条数
    }
  },
  created() {

  },
  mounted() {
    this.$nextTick(()=>{
      this.getline();//完成率
    })
  },
  methods: {
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.userList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    getActive(index) {
      this.active = index;
    },
    getline(){
      var chartDom = document.getElementById('lineMain');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        grid: {
          top: '40px',    // 上边距
          right: '40px',  // 右边距
          bottom: '40px', // 下边距
          left: '50px'    // 左边距
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      };

      option && myChart.setOption(option);
    },
    handleQuery() {

    }
  },
}
</script>
<style scoped lang="scss">
.viewData {
  padding: 14px;
}

.title {
  height: 40px;
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 14px;
}

.time-big {
  display: flex;
  align-items: center;

  .tablist {
    display: flex;
    margin-right: 10px;

    .tab-item {
      width: 75px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      border: 1px solid #eee;
    }
  }
}

</style>
